<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Label文字标注</title>
    <style>
      .molar-annotator-text--labeled {
        position: relative;
        color: red;
        display: inline;
        border: 0.1px solid black;
        box-sizing: border-box;
        overflow: visible;
      }
      .molar-annotator-text--inited {
        display: block;
      }
      .molar-annotator-text--unlabeled {
        display: inline;
      }
      .molar-annotator-label--inited {
        position: absolute;
        margin-top: -10px;
        left: 0;
        font-size: 8px;
        width: 100%;
        height: 10px;
        background-color: red;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        border: 1px solid black;
      }
      .moalr-annotator-label--selected {
      }
      .molar-annotator-label--destoryed {
      }
    </style>
  </head>
  <body>
    <div id="example"></div>
    <script src="../node_modules/@molar/annotator-core/dist/annotator-core.global.js"></script>
    <script>
      let { Core } = MolarAnnotatorCore;
      let originString = `孟子见梁惠王
      沛公则置车骑
      此人一一为所具言所闻
      廉君宣恶言`;
      let domElement = document.getElementById("example");
      const annotator = new Core(originString, domElement);
      annotator.on("textSelected", (startIndex, endIndex) => {
        console.log(startIndex, endIndex);
      });
    </script>
  </body>
</html>
